import React, { useState, useRef, useEffect } from 'react';
import {
    Box,
    TextField,
    IconButton,
    Avatar,
    Dialog,
    DialogContent,
    DialogActions,
    Typography,
    CircularProgress,
    styled
} from '@mui/material';
import { Send, SmartToy, Person } from '@mui/icons-material';
import { chatWithDeepSeek } from './deepseekApi';

// 消息类型定义
interface Message {
    id: string;           // 消息唯一ID
    text: string;         // 消息内容
    sender: 'user' | 'bot'; // 发送者类型
    timestamp: Date;      // 消息时间戳
    status?: 'sending' | 'sent' | 'failed'; // 消息状态（可选）
}

// 使用styled创建自定义样式组件

// 聊天容器样式
const ChatContainer = styled(Box)({
    display: 'flex',
    flexDirection: 'column',
    height: '100%',
    backgroundColor: '#f5f5f5', // 浅灰色背景
});

// 消息列表样式
const MessageList = styled(Box)({
    flex: 1,             // 占据剩余空间
    overflowY: 'auto',   // 内容超出时显示垂直滚动条
    padding: '16px',     // 内边距
});

// 用户消息样式
const UserMessage = styled(Box)(({ theme }) => ({
    display: 'flex',
    justifyContent: 'flex-end', // 用户消息靠右显示
    marginBottom: '12px',      // 底部外边距
    '& .content': {           // 内容区域样式
        backgroundColor: theme.palette.primary.main, // 主题主色
        color: 'white',       // 白色文字
        padding: '10px 16px', // 内边距
        borderRadius: '18px 18px 0 18px', // 圆角（右上角更大）
        maxWidth: '80%',      // 最大宽度
        wordBreak: 'break-word', // 长单词自动换行
    },
}));

// AI消息样式
const BotMessage = styled(Box)(({ theme }) => ({
    display: 'flex',
    justifyContent: 'flex-start', // AI消息靠左显示
    marginBottom: '12px',
    '& .content': {
        backgroundColor: 'white',  // 白色背景
        color: theme.palette.text.primary, // 主文本颜色
        padding: '10px 16px',
        borderRadius: '18px 18px 18px 0', // 圆角（左上角更大）
        maxWidth: '80%',
        wordBreak: 'break-word',
        boxShadow: theme.shadows[1], // 轻微阴影效果
    },
}));

// 输入区域样式
const InputArea = styled(Box)({
    display: 'flex',
    alignItems: 'center',     // 垂直居中
    padding: '8px 16px',      // 内边距
    backgroundColor: 'white', // 白色背景
    borderTop: '1px solid #e0e0e0', // 顶部边框
});

// 组件Props定义
interface ChatDialogProps {
    open: boolean;       // 控制对话框是否显示
    onClose: () => void; // 关闭对话框的回调函数
    token: string;       // API认证token
}

const ChatDialog: React.FC<ChatDialogProps> = ({ open, onClose, token }) => {
    // 状态管理
    const [messages, setMessages] = useState<Message[]>([]); // 消息列表
    const [input, setInput] = useState('');                 // 输入框内容
    const [isLoading, setIsLoading] = useState(false);      // 加载状态
    const [conversationId, setConversationId] = useState<string | undefined>(); // 会话ID
    const messagesEndRef = useRef<HTMLDivElement>(null);    // 用于滚动到底部的引用

    // 初始化时设置token到localStorage
    useEffect(() => {
        if (token) {
            localStorage.setItem('deepseek_token', token);
        }
    }, [token]);

    // 滚动到底部的函数
    const scrollToBottom = () => {
        messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' });
    };

    // 当消息列表变化时自动滚动到底部
    useEffect(() => {
        scrollToBottom();
    }, [messages]);

    // 发送消息处理函数
    const handleSendMessage = async () => {
        const trimmedInput = input.trim();
        if (!trimmedInput || isLoading) return; // 空消息或正在加载时不处理

        // 创建用户消息对象
        const userMessage: Message = {
            id: Date.now().toString(), // 使用时间戳作为ID
            text: trimmedInput,
            sender: 'user',
            timestamp: new Date(),
            status: 'sending', // 初始状态为发送中
        };

        // 添加用户消息到列表
        setMessages(prev => [...prev, userMessage]);
        setInput(''); // 清空输入框
        setIsLoading(true); // 设置加载状态

        try {
            // 调用API发送消息
            const { response, conversationId: newConversationId } = await chatWithDeepSeek(
                trimmedInput,
                conversationId
            );

            // 更新会话ID（如果API返回了新ID）
            if (newConversationId) {
                setConversationId(newConversationId);
            }

            // 更新用户消息状态为已发送
            setMessages(prev =>
                prev.map(msg =>
                    msg.id === userMessage.id ? { ...msg, status: 'sent' } : msg
                )
            );

            // 创建AI回复消息
            const botMessage: Message = {
                id: Date.now().toString(),
                text: response,
                sender: 'bot',
                timestamp: new Date(),
                status: 'sent',
            };

            // 添加AI回复到消息列表
            setMessages(prev => [...prev, botMessage]);
        } catch (error) {
            // 出错时将用户消息状态更新为失败
            setMessages(prev =>
                prev.map(msg =>
                    msg.id === userMessage.id ? { ...msg, status: 'failed' } : msg
                )
            );

            // 添加错误提示消息
            const errorMessage: Message = {
                id: Date.now().toString(),
                text: '抱歉，发生错误，请稍后再试。',
                sender: 'bot',
                timestamp: new Date(),
            };
            setMessages(prev => [...prev, errorMessage]);
        } finally {
            setIsLoading(false); // 无论成功失败，都取消加载状态
        }
    };

    // 键盘事件处理
    const handleKeyPress = (e: React.KeyboardEvent) => {
        if (e.key === 'Enter' && !e.shiftKey) {
            e.preventDefault(); // 阻止默认行为（换行）
            handleSendMessage(); // 发送消息
        }
    };

    return (
        <Dialog
            open={open}
            onClose={onClose}
            fullScreen
            PaperProps={{
                style: {
                    height: '90vh', // 高度为视口的90%
                    maxHeight: '90vh',
                    borderRadius: '16px 16px 0 0', // 顶部圆角
                    position: 'fixed',
                    bottom: 0, // 固定在底部
                    left: 0,
                    right: 0,
                    margin: 0,
                    maxWidth: '100%',
                },
            }}
        >
            <DialogContent sx={{ p: 0 }}> {/* 去除默认内边距 */}
                <ChatContainer>
                    {/* 对话框标题栏 */}
                    <Box
                        sx={{
                            p: 2, // 内边距
                            display: 'flex',
                            alignItems: 'center',
                            backgroundColor: 'white',
                            borderBottom: '1px solid #e0e0e0', // 底部边框
                        }}
                    >
                        <Avatar sx={{ bgcolor: 'primary.main', mr: 2 }}>
                            <SmartToy /> {/* AI图标 */}
                        </Avatar>
                        <Typography variant="h6">DeepSeek 智能助手</Typography>
                    </Box>

                    {/* 消息列表区域 */}
                    <MessageList>
                        {messages.map((message) => (
                            <React.Fragment key={message.id}>
                                {message.sender === 'user' ? (
                                    // 用户消息渲染
                                    <UserMessage>
                                        <Box className="content">
                                            <Typography>{message.text}</Typography>
                                            <Typography variant="caption" display="block" sx={{
                                                textAlign: 'right',
                                                color: 'rgba(255,255,255,0.7)' // 半透明白色
                                            }}>
                                                {message.timestamp.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })}
                                                {message.status === 'sending' && ' · 发送中'}
                                                {message.status === 'failed' && ' · 发送失败'}
                                            </Typography>
                                        </Box>
                                    </UserMessage>
                                ) : (
                                    // AI消息渲染
                                    <BotMessage>
                                        <Avatar sx={{ bgcolor: 'secondary.main', mr: 2 }}>
                                            <SmartToy />
                                        </Avatar>
                                        <Box className="content">
                                            <Typography>{message.text}</Typography>
                                            <Typography variant="caption" display="block" sx={{
                                                textAlign: 'left',
                                                color: 'text.secondary' // 次要文本颜色
                                            }}>
                                                {message.timestamp.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })}
                                            </Typography>
                                        </Box>
                                    </BotMessage>
                                )}
                            </React.Fragment>
                        ))}
                        {/* 加载中的指示器 */}
                        {isLoading && (
                            <BotMessage>
                                <Avatar sx={{ bgcolor: 'secondary.main', mr: 2 }}>
                                    <SmartToy />
                                </Avatar>
                                <Box className="content">
                                    <CircularProgress size={20} /> {/* 圆形进度条 */}
                                </Box>
                            </BotMessage>
                        )}
                        {/* 用于自动滚动到底部的空div */}
                        <div ref={messagesEndRef} />
                    </MessageList>

                    {/* 输入区域 */}
                    <InputArea>
                        <TextField
                            fullWidth
                            variant="outlined"
                            placeholder="输入消息..."
                            value={input}
                            onChange={(e) => setInput(e.target.value)}
                            onKeyPress={handleKeyPress}
                            multiline  // 支持多行输入
                            maxRows={4} // 最多显示4行
                            sx={{ mr: 1 }} // 右边距
                        />
                        <IconButton
                            color="primary"
                            onClick={handleSendMessage}
                            disabled={!input.trim() || isLoading} // 空内容或加载中时禁用
                        >
                            <Send /> {/* 发送图标 */}
                        </IconButton>
                    </InputArea>
                </ChatContainer>
            </DialogContent>
        </Dialog>
    );
};

export default ChatDialog;